<template>
	<view class="top-nav-box" :style="{height:navHeight, paddingTop:statusBarHeight}">
		<image class="top-nav-back" src="../../static/images/icon_back.png" @click="getback"></image>
		<text class="top-nav-title" @click="getback">{{title}}</text>
		<view style="position: relative;margin-left: 30rpx;">
			<image class="top-nav-car" src="../../static/images/icon_home_cart_black.png"
				@click="goUrl('/pages/shop_cart/shop_cart')"></image>
			<u-badge v-if="cartNum" :bgColor="colorConfig.primary" :offset="[-10, -20]" :count="cartNum"></u-badge>
		</view>
		<image class="user-pic" :src="isLogin ? userInfo.avatar : '/static/images/portrait_empty.png'"
			@click="goUrl('/pages/user/user')"></image>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "top-nav",
		props: {
			title: {
				type: String
			},
			share: {
				type: Number
			}
		},
		computed: {
			...mapGetters(["userInfo", 'sysInfo', "cartNum"]),
			statusBarHeight() {
				return this.sysInfo.statusBarHeight + 'px'
			},
			navHeight() {
				return this.sysInfo.navHeight + 'px'
			},
		},
		data() {
			return {

			};
		},
		methods: {
			getback() {
				if (this.share) {
					uni.switchTab({
						url: "/pages/index/index"
					});
				} else {
					//#ifdef H5
					this.$router.go(-1); //返回上一层
					//#endif

					//#ifdef MP-WEIXIN
					uni.navigateBack({
						delta: 1
					});
					//#endif	
				}
			},
			goUrl(url) {
				uni.switchTab({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-nav-box {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 200rpx;
		top: 0;
		background-color: #fff;
		z-index: 1;

		.top-nav-title {
			flex: 1;
			font-size: 28rpx;
			font-weight: 700;
			color: #303030;
		}

		.top-nav-back {
			width: 21rpx;
			height: 36rpx;
			padding-right: 20rpx;
		}

		.top-nav-car {
			width: 46rpx;
			height: 42rpx;
		}

		.user-pic {
			width: 46rpx;
			height: 46rpx;
			margin-left: 35rpx;
			border-radius: 50%;
		}
	}
</style>